﻿<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>杰普大数据电信分析系统</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>

<body>
<div class="loading">
    <div class="loadbox"><img src="image/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <h1>杰普大数据电信分析系统</h1>
    <div class="time" id="showTime">2019年12月05日16时16分54秒</div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            var t = null;
            document.getElementById("showTime").innerHTML = y + "年" + Appendzero(mt) + "月" + Appendzero(day) + "日" + Appendzero(h) + "时" + Appendzero(m) + "分" + Appendzero(s) + "秒";

            function Appendzero(obj) {
                if (obj < 10) return "0" + "" + obj;
                else return obj;
            }

            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
				<span style="font-size: 13px;border-bottom: 2px solid #a5c5f83b;padding: 8px 0;">
				<label>日期：</label>
                    <input th:if="${param.callTime}==null" type="month" id="callTime" style="width: 132px"
                           value="2020-05"
                    />
                    <input th:if="${param.callTime}!=null" type="month" id="callTime" style="width: 132px"

                           th:value="${param.callTime}"/>
                    <label>&nbsp;&nbsp;&nbsp;
				号码：</label>
                    <input th:if="${param.tel} ==null" type="text" id="tel" placeholder="请输入手机号码" style="width: 140px"
                           value="19313925217"
                    />
                    <input th:if="${param.tel} !=null" type="text" id="tel" placeholder="请输入手机号码" style="width: 140px"
                           th:value="${param.tel}"/>
                </span><br/>
            <script>
                $(function () {

                    $('#tel').bind('keyup', function (event) {
                        if (event.keyCode == "13") {
                            console.info($("#tel").val() + "------" + $("#calltime").val());
                            window.location.href = "callLog?tel=" + $("#tel").val() + "&callTime=" + $("#callTime").val();
                        }
                    });
                });

            </script>
            <div class="boxall" style="height: calc(15% - .15rem)">
                <ul class="row h100 row1">
                    <li class="col-4">
                        <div class="bar1"><img src="image/icon1.png">
                            <h3><span>语音剩余</span><span th:text="${plan.callDuration}"></span></h3>
                        </div>
                    </li>
                    <li class="col-4">
                        <div class="bar1"><img src="image/icon4.png">
                            <h3><span>流量剩余</span>
                                <span th:text="${plan.flux}"></span></h3>
                        </div>
                    </li>
                    <li class="col-4">
                        <div class="bar1"><img src="image/icon5.png">
                            <h3><span>短信剩余</span> <span th:text="${plan.messageTariff}"></span></h3>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="boxall" style="height: calc(43% - .15rem)">

                <ul class="sec h100">
                    <li>
                        <div>
                            <p><img src="image/icon4.png">通话</p>
                            <div class="barnav">
                                <div class="bar2"><span style="width:50%;"></span></div>
                                <span th:text="${callPer.sumDuration}"></span><span>分钟</span></div>


                        </div>

                        <div>
                            <div class="zaf">
                                <p>同比</p>
                                <p>
                                    <span th:if="${callPer.durationPer>=0}"><span
                                            th:text="${callPer.durationPer}"></span><i>%</i><img
                                            src="image/up.png"></span>
                                    <span th:if="${callPer.durationPer<0}"><span
                                            th:text="${callPer.durationPer}"></span><i>%</i><img
                                            src="image/down.png"></span>
                                </p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div>
                            <p><img src="image/icon5.png">流量</p>

                            <div class="barnav">
                                <div class="bar2"><span style="width:50%;"></span></div>
                                <span th:text="${callPer.fluxNum}"></span><span>MB</span></div>
                        </div>

                        <div>
                            <div class="zaf">
                                <p>同比</p>
                                <p>

                                    <span th:if="${callPer.fluxPer >=0}">
										<span th:text="${callPer.fluxPer}"></span>
										<i>%</i><img src="image/up.png"></span>

                                    <span th:if="${callPer.fluxPer <0}">
										<span th:text="${callPer.fluxPer}"></span><i>%</i><img
                                            src="image/down.png"></span>
                                </p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div>
                            <p><img src="image/icon6.png">短信</p>
                            <div class="barnav">
                                <div class="bar2"><span style="width:50%;"></span></div>
                                <span th:text="${callPer.sumMessages}"></span><span>条</span></div>
                        </div>

                        <div>
                            <div class="zaf">
                                <p>同比</p>
                                <p>
                                    <span th:if="${callPer.messagesPer>=0}"><span
                                            th:text="${callPer.messagesPer}"></span><i>%</i><img
                                            src="image/up.png"></span>
                                    <span th:if="${callPer.messagesPer<0}"><span
                                            th:text="${callPer.messagesPer}"></span><i>%</i><img
                                            src="image/down.png"></span>

                                </p>
                            </div>
                        </div>
                    </li>

                </ul>

            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">当年消费</div>
                <div class="boxnav" id="echarts3"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height: calc(20% - .15rem)">
                <ul class="row h100 clearfix">
                    <li class="col-6">
                        <div class="sqzs h100">
                            <p>年统计费用</p>
                            <h1 th:text="${consume.num}"></h1>
                        </div>
                    </li>
                    <li class="col-6">
                        <ul class="row h100 clearfix">
                            <li class="col-4">
                                <div class="tit01">流量</div>
                                <div class="piebox" id="pe01"></div>
                            </li>
                            <li class="col-4">
                                <div class="tit01">通话</div>
                                <div class="piebox" id="pe02"></div>
                            </li>
                            <li class="col-4">
                                <div class="tit01">短信</div>
                                <div class="piebox" id="pe03"></div>
                            </li>
                        </ul>

                    </li>
                </ul>
            </div>
            <div class="boxall" style="height: calc(38% - .15rem)">
                <div class="boxnav h100" id="echarts1"></div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">套餐推荐</div>
                <div class="boxnav" id="echarts2"></div>
            </div>

        </li>
        <li>

            <div class="boxall" style="height: calc(15% - .15rem)">

                <ul class="row h100 row1">
                    <li class="col-4">
                        <div class="bar1 bar2"><img src="image/icon7.png">
                            <h3>当月消费
                                <span th:text="${plan.id}+'元'"></span></h3>
                        </div>
                    </li>
                    <li class="col-4">
                        <div class="bar1 bar2"><img src="image/icon8.png">
                            <h3>当月余额
                                <span th:text="${rand1}+'元'">
									</span>

                            </h3>
                        </div>
                    </li>
                    <li class="col-4">
                        <div class="bar1 bar2"><img src="image/icon9.png">
                            <h3>当月积分
                                <span th:text=" ${rand2}+'积分'"></span>
                            </h3>
                        </div>
                    </li>
                </ul>


            </div>
            <div class="boxall" style="height: calc(43% - .15rem)">
                <div class="alltitle">消费分布</div>
                <div class=" boxnav" id="lastecharts">
                </div>

            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">流量使用排行榜</div>
                <div class=" boxnav paim">
                    <ul class="h100">
                        <li>
                            <span>1</span>
                            <div class="pmnav">
                                <p>微信</p>
                                <div class="pmbar"><span style="width:100%"></span><i>500</i></div>
                            </div>
                        </li>
                        <li>
                            <span>2</span>
                            <div class="pmnav">
                                <p>王者荣耀</p>
                                <div class="pmbar"><span style="width:92%"></span><i>400</i></div>
                            </div>
                        </li>
                        <li>
                            <span>3</span>
                            <div class="pmnav">
                                <p>今日头条</p>
                                <div class="pmbar"><span style="width:90%"></span><i>180</i></div>
                            </div>
                        </li>
                        <li>
                            <span>4</span>
                            <div class="pmnav">
                                <p>抖音</p>
                                <div class="pmbar"><span style="width:88%"></span><i>160</i></div>
                            </div>
                        </li>
                        <li>
                            <span>5</span>
                            <div class="pmnav">
                                <p>优酷</p>
                                <div class="pmbar"><span style="width:86%"></span><i>140</i></div>
                            </div>
                        </li>
                    </ul>

                </div>

            </div>

        </li>
    </ul>
</div>


<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">
    /****/
    let randomNum = function (min, max) {
        const range = max - min;
        const rand = Math.random();
        return (min + Math.round(rand * range));
    };

    let randomNums = function (min, max, count) {
        let nums = [];
        for (let i = 0; i < count; i++) {
            nums[i] = randomNum(min, max);
        }
        return nums;
    };

    $(function () {


        $.ajax({
            type: "post",        // 请求方式
            url: "getData", // 请求路径
            dataType: "json",   // 预期返回一个 json 类型数据
            data: {
                'tel': $('#tel').val(),
                'callTime': $('#callTime').val()
            },
            success: function (data) {   // data是形参名，代表返回的数据
                console.log(data)
                echarts_1(data.fluxs, data.calls, data.messages)
                echarts_2(data.oPlan, data.nPlan)
                echarts_3(data.consumes)
                pe04()
                console.log("ok")
            }
        });


        function echarts_1(fluxs, calls, messages) {

            var myChart = echarts.init(document.getElementById('echarts1'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},

                },
                legend: {
                    x: 'center',
                    y: '0',
                    icon: 'circle',
                    itemGap: 8,
                    textStyle: {color: 'rgba(255,255,255,.5)'},
                    itemWidth: 10,
                    itemHeight: 10,
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '15',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {show: false},

                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: 14
                        }
                    },
                },

                yAxis: {
                    type: 'value',
                    splitNumber: 4,
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.05)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: 14
                        },
                    },
                },
                series: [{
                    name: '通话',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#03b48e'
                            }]),
                            barBorderRadius: 11,
                        }

                    },
                    data: calls

                },
                    {
                        name: '流量',
                        type: 'bar',
                        barWidth: '15%',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#3893e5'
                                }, {
                                    offset: 1,
                                    color: '#248ff7'
                                }]),
                                barBorderRadius: 11,
                            }
                        },
                        data: fluxs

                    },
                    {
                        name: '短信',
                        type: 'bar',
                        barWidth: '15%',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#43cadd'
                                }, {
                                    offset: 1,
                                    color: '#0097c9'
                                }]),
                                barBorderRadius: 11,
                            }
                        },
                        data: messages

                    }

                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });


        }

        function echarts_2(oPlan, nPlan) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts2'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#dddc6b'
                        }
                    }
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '20',
                    bottom: '-10',
                    containLabel: true
                }, legend: {
                    data: ['旧套餐', '新套餐'],
                    right: 'center',
                    top: 0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                },

                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }

                    },

                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

                }, {

                    axisPointer: {show: false},
                    axisLine: {show: false},
                    position: 'bottom',
                    offset: 20,


                }],

                yAxis: [{
                    type: 'value',
                    axisTick: {show: false},
                    // splitNumber: 6,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },

                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                }],
                series: [
                    {
                        name: '旧套餐',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {

                            normal: {
                                color: 'rgba(228, 228, 126, 1)',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(228, 228, 126, .8)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(228, 228, 126, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#dddc6b',
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: oPlan
                    }, {
                        name: '新套餐',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {

                            normal: {
                                color: 'rgba(255, 128, 128, 1)',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255, 128, 128,.8)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(255, 128, 128, .1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#dddc6b',
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: nPlan

                    },

                ]

            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_3(consumes) {
            console.log(consumes)
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts3'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#dddc6b'
                        }
                    }
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '20',
                    bottom: '-10',
                    containLabel: true
                },

                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }

                    },

                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

                }, {

                    axisPointer: {show: false},
                    axisLine: {show: false},
                    position: 'bottom',
                    offset: 20,


                }],

                yAxis: [{
                    type: 'value',
                    axisTick: {show: false},
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },

                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)',

                        }
                    }
                }],
                series: [
                    {
                        name: '消费金额',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 10,
                        showSymbol: true,
                        lineStyle: {

                            normal: {
                                color: 'rgba(228, 228, 126, 1)',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(228, 228, 126, .8)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(228, 228, 126, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#dddc6b',
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: consumes,
                    }

                ]

            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }


        function pe04() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('lastecharts'));
            option = {

                tooltip: {
                    trigger: 'axis'
                },
                radar: [{
                    indicator: [{
                        text: '通讯',
                        max: 100
                    }, {
                        text: '娱乐',
                        max: 100
                    }, {
                        text: '学习',
                        max: 100
                    }, {
                        text: '办公',
                        max: 100
                    }, {
                        text: '其他',
                        max: 100
                    }],
                    textStyle: {
                        color: 'red'
                    },
                    center: ['50%', '50%'],
                    radius: '70%',
                    startAngle: 90,
                    splitNumber: 4,
                    shape: 'circle',

                    name: {
                        padding: -5,
                        formatter: '{value}',
                        textStyle: {
                            fontSize: 14,
                            color: 'rgba(255,255,255,.6)'
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: 'rgba(255,255,255,.05)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.05)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.05)'
                        }
                    }
                },],
                series: [{
                    name: '雷达图',
                    type: 'radar',
                    tooltip: {
                        trigger: 'item'
                    },
                    data: [{
                        name: '当月平均值',
                        value: randomNums(10, 40, 5),
                        lineStyle: {
                            normal: {
                                color: '#03b48e',
                                width: 2,
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: '#03b48e',
                                opacity: .4
                            }
                        },
                        symbolSize: 0,

                    }, {
                        name: '整年平均值',
                        value: randomNums(0, 100, 5),
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                color: '#3893e5',
                                width: 2,
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: 'rgba(19, 173, 255, 0.5)'
                            }
                        }
                    }]
                },]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    })
</script>
<script language="JavaScript" src="js/js.js"></script>
</body>
</html>